<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-29 11:08:14
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-01 22:27:25
 * @FilePath: \guanggu_traffic\src\components\public\AttributeQuery\AttributeQuery.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
		<el-menu-item index="6" id="search">
            <AttributeQueryPopup :layer_icon ="layer_icon" ref="popupInstance"/>
            <input type="text"  class="searchAccident" v-model.trim="searchAccidentValue" placeholder="请输入事件类型"></input>
            <button class="searchButton" @click="handleSearch" v-if="!querying">查询</button>
            <button class="cancelSearchButton" @click="handleCancelSearch" v-if="querying">取消查询</button>
        </el-menu-item>    
</template>

<script setup>
import {ref,getCurrentInstance,onMounted,} from 'vue'
import {Query} from"@/api/mapgis-api/Query"
import AttributeQueryPopup from './AttributeQueryPopup.vue'
let querying = ref(false);// 跟踪查询状态
const popupInstance = ref(null)// 弹窗组件的实例
let searchAccidentValue = ref("");
const {proxy} = getCurrentInstance();
let map
//设置搜索的要素显示成标注
const icon_style = new ol.style.Style({
    /* 图标配置 */ 
    image:new ol.style.Icon({
        anchor:[0.5,60],// 图标锚点坐标
        anchorOrigin:"top-right",// 锚点参考原点
        anchorXUnits:'fraction',// X轴单位（百分比
        anchorYUnits:'pixels',// Y轴单位（像素）
        offsetOrigin:'top-right', // 偏移参考原点
        scale:0.5,// 图标缩放比例
        opacity:0.75,// 图标透明度（0-1）
        src:new URL("@/assets/images/定位.png",import.meta.url).href//图标资源路径;;import.meta.url：获取当前模块的 URL，用于解析相对路径为绝对路径。
    })
})
const source_icon = new ol.source.Vector({});
const layer_icon = new ol.layer.Vector({
    source:source_icon,
    style:icon_style
})//标注图层
/***element-plus组件alert消息提示**/
const open1= ()=>{
    ElMessage({
        message:"查询成功",
        type:'success',
        plain:true,
    })
}
const open2= ()=>{
    ElMessage({
        message:"查询结果为空",
        type:'warning',
        plain:true,
    })
}
const open4= ()=>{
    ElMessage({
        message:"输入值不能为空",
        type:'error',
        plain:true,
    })
}
/*****搜素事件函数回调**************/ 
const handleSearch = ()=>{
    //如果输入框为空
    if(!searchAccidentValue.value.trim()){
        open4();
        //如果不return的话会查询到错误的结果
        return;
    }
    /****属性查询*******/
    let service = {
        docName:import.meta.env.VITE_MAPGIS_DOC_NAME,
        layerId:2
    }
    let where={
        key:'事件类型',
        value:searchAccidentValue.value
    }
    Query.queryByAttribute({
        where,
        service,
    }).then((features)=>{
        //封装Query.js,返回值是搜索到的所有要素组成的数组
        if(!features){            
            open2()//查询结果为空
            return 
        }
        //如果要素存在,则创建图层
        querying.value  = true;//重置查询状态
        source_icon.addFeatures(features);
        open1();
    })
    //显示完标注之后,在清空输入框 否则查询不到
    searchAccidentValue.value = '';
}

/****取消查询函数*************/ 
const handleCancelSearch = ()=>{
    layer_icon.getSource().clear();
    querying.value = false;
    popupInstance.value.closePopup();//子组件暴露的方法
}
//组件挂在完成后,添加图层到地图
onMounted(() => {
   map = proxy.$map;
   map.addLayer(layer_icon);
})
</script>

<style lang="scss" scoped>
#search {
  margin-left: auto;
  margin-right: 200px;
  display: flex;
}
#search:hover {
  background-color: var(--el-menu-bg-color);
  color: var(--el-menu-bg-color);
  .searchAccident {
    border: 3px solid #ff2d51;
  }
}
.searchAccident {
  height: 35px;
  width: 150px;
  z-index: 1000;
  border-top-left-radius: 5px; /* 设置左上角圆角 */
  border-bottom-left-radius: 5px; /* 设置左下角圆角 */
  padding-left: 10px;
  border: 1px solid #bbb;
  outline: none; /* 移除轮廓 */
}
.searchButton {
  height: 35px;
  width: 100px;
  z-index: 1000;
  border: 1px solid #bbb;
  background: white;
  color: var(--el-menu-bg-color);
  border-top-right-radius: 5px; /* 设置右上角圆角 */
  border-bottom-right-radius: 5px; /* 设置右下角圆角 */
  font-size: 16px;
}
.cancelSearchButton {
  height: 35px;
  width: 100px;
  z-index: 1000;
  background: #ff2d51;
  color: white;
  border-top-right-radius: 5px; /* 设置右上角圆角 */
  border-bottom-right-radius: 5px; /* 设置右下角圆角 */
  border: none;
  font-size: 14px;
}</style>
